<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :xs="24">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item prop="userName">
            <el-input v-model="queryParams.customerName" placeholder="请输入客户名称" clearable style="width: 200px" @keyup.enter="getList" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="tableList">
      <el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true" />
      <el-table-column label="客户姓名" align="center" prop="customerName" :show-overflow-tooltip="true" />
      <el-table-column label="客户号" align="center" prop="customerId" />
      <el-table-column label="任务生成日" align="center" prop="taskCreateDate" />
      <el-table-column label="任务完成日" align="center" prop="taskDueDate" />
      <el-table-column label="检查状态" align="center" prop="checkStatus">
        <template #default="scope">
          <div>{{ scope.row.checkStatus == "0" ? "未检查" : "已检查" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="查看" placement="top">
            <el-button link type="primary" icon="View" @click="handleEditTable(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page_count" v-model:limit="queryParams.page_size" @pagination="getList" />
    <!-- 预览界面 -->
  </div>
</template>

<script setup name="Gen">
import { Search } from "@element-plus/icons-vue";
import { onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import { getCheckList } from "@/api/guarantee";
const treeRef = ref();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const tableList = ref([]);
const loading = ref(false);
const total = ref(0);

const data = reactive({
  queryParams: {
    pageSize: "1",
    pageCount: "10",
    checkType: "0",
    customerName: "",
  },
  preview: {
    open: false,
    title: "添加角色",
    data: {},
    activeName: "domain.java",
  },
});

const { queryParams, preview } = toRefs(data);

onMounted(() => {});

function getList() {
  tableList.value;
  // const params = { taskId: "T001", checkType: "0", customerName: "3", customerId: "CUSTOO1", taskCreateDate: "2021-01-05", taskDueDate: "2021-11-05", checkStatus: "0",pageSize:'1',pageCount:'5' };
  const params = { pageSize: "1", pageCount: "5", checkType: "0" };
  getCheckList(queryParams.value).then((res) => {
    console.log(res, "6666");
    if (res.list.length > 0) {
      tableList.value = res.list;
      total.value = res.total;
    } else {
      tableList.value = [];
      total.value = 0;
    }
  });
}

//编辑
function handleEditTable(val) {
  router.push({ path: "firstDetail", query: { taskId: val.taskId, customerId: val.customerId } });
}

getList();
</script>
<style lang="scss" scoped>
.headline {
  background-color: #f3f3f3;
  text-align: left;
  span {
    display: block;
    padding-top: 5px;
    margin-left: 5px;
  }
}
:deep(.el-overlay-dialog) {
  top: 500vh;
}
:deep(.el-aside) {
  margin: 0;
  padding: 0;
  border: 1px solid #dadbdc;
  background: #fff;
}

.title {
  height: 30px;
  line-height: 30px;
  background-color: #ebebeb;
  text-align: center;
}
.pd-5 {
  padding: 5px;
}
:deep(.el-affix) {
  width: 100% !important;
}
</style>
